<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>
		<view class="top-card">
			<image class="banner" style="width: 100%;height: 460rpx;" src="/static/image/home/bg.png">
			</image>
		</view>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="2-1" style="background-color: #fff;padding: 0;">
			<view
				style="display: flex;justify-content: flex-start;align-items: center;height: 50px;padding-bottom: 15rpx;border-bottom: 1px solid #D8D8D8;">
				<block v-for="(item, index) in categories" :key="index" v-if="index < 10">
					<view :class="categoryIndex== item.id?'active':'fl'" @click="setCategory(item)">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="align-center"
				style="padding-top: 15rpx;padding-bottom: 15rpx;border-bottom: 1px solid #D8D8D8;justify-content: flex-start;">
				<view class="tag">品类<image src="/static/image/home/xxx.png" style="width: 23rpx;margin-left: 10rpx;"
						mode="widthFix"></image>
				</view>
				<view class="tag paddingleft">人群<image src="/static/image/home/xxx.png"
						style="width: 23rpx;margin-left: 10rpx;" mode="widthFix"></image>
				</view>
				<view class="tag paddingleft">季节<image src="/static/image/home/xxx.png"
						style="width: 23rpx;margin-left: 10rpx;" mode="widthFix"></image>
				</view>
				<view class="tag paddingleft">区域<image src="/static/image/home/xxx.png"
						style="width: 23rpx;margin-left: 10rpx;" mode="widthFix"></image>
				</view>
				<view class="tag paddingleft">品牌<image src="/static/image/home/xxx.png"
						style="width: 23rpx;margin-left: 10rpx;" mode="widthFix"></image>
				</view>
				<view class="tag paddingleft">元素<image src="/static/image/home/xxx.png"
						style="width: 23rpx;margin-left: 10rpx;" mode="widthFix"></image>
				</view>
			</view>
			<view class="container"
				style="display: flex;justify-content: flex-start;align-items: center;margin-top: 20rpx;">
				<view class="align-center">
					<view :style="tagIndex==1?'color:#0033FF':''" @click="clickTag(1)">推荐</view>
					<view style="margin-left: 15px;" :style="tagIndex==2?'color:#0033FF':''" @click="clickTag(2)">最新
						<image src="/static/image/home/jt.png" style="width: 8rpx;margin-left: 10rpx;" mode="widthFix">
						</image>
					</view>
					<view style="margin-left: 15px;" :style="tagIndex==3?'color:#0033FF':''" @click="clickTag(3)">同款
						<image src="/static/image/home/jt.png" style="width: 8rpx;margin-left: 10rpx;" mode="widthFix">
						</image>
					</view>
					<view style="margin-left: 15px;" :style="tagIndex==4?'color:#0033FF':''" @click="clickTag(4)">点赞
						<image src="/static/image/home/jt.png" style="width: 8rpx;margin-left: 10rpx;" mode="widthFix">
						</image>
					</view>

					<view style="margin-left: 15px;" :style="tagIndex==5?'color:#0033FF':''" @click="clickTag(5)">收赞
						<image src="/static/image/home/jt.png" style="width: 8rpx;margin-left: 10rpx;" mode="widthFix">
						</image>
					</view>
				</view>
				<view style="width: 400px;">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入关键词" clearButton="none"
						cancelButton="none" @confirm="search" />
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;">
				<view style="width: 24%;margin-bottom: 40rpx;border-bottom: 1px solid #D8D8D8;padding-bottom: 12px;" v-for="(item,index) in 8" @click="goUrl('/pages/article/info?id=')">
					<view>
						<image src="/static/image/home/newsimg.png" style="width: 100%;" mode="widthFix"></image>
					</view>
					<view style="color: #3D3D3D;font-size: 30rpx;font-weight: 600;padding-top: 20rpx;">这里是资讯标题，带有图片数量的是图册类资讯</view>
					<view style="color: #666666;font-size: 32rpx;font-weight: 500;padding-top: 20rpx;">23-03-20</view>
				</view>
				<!-- <view style="border-bottom: 1px solid #D8D8D8;width:100% ;" v-for="(item,index) in 8" v-if="(index+1)%4==0"></view> -->
			</view>
		</menu-wrapper>
<tool-bar :scrollTop="scrollTop"></tool-bar>
		<!-- 页脚 -->
		<!-- <zw-footer></zw-footer> -->
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import centerConfig from '@/common/config/user/center.config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				...centerConfig,
				categories: [],
				counts: [],
				tabIndex: 1,
				tagIndex: 1,
				
				categoryIndex: -1,
			}
		},
		computed: {
			...mapState(['loginUser']),
			currentTime() {
				const currentHour = new Date().getHours();
				const timeQuantums = ['凌晨', '上午', '下午', '晚上'];
				return timeQuantums[Math.floor(currentHour / 6)];
			}
		},
		onLoad() {
			this.findCategories();
			this.$store.commit('tab', 5);
		},
		methods: {
			setCategory(item) {
				this.categoryIndex = item.id
			},
			findCategories() {
				this.$util.request('/api/v1/category/all', {}, (res) => {
					console.log(res)
					this.categories = res.data;
					this.categories.unshift({
						id: -1,
						name: '全部'
					})
				}, true);
			},
			goUrl(url) {
				uni.navigateTo({
					url: url,
					fail(err) {
						console.log(err)
					}
				})
			},
			clickOption(index) {
				this.tabIndex = index;
			},
			clickTag(index) {
				this.tagIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.paddingleft {
		padding-left: 30rpx;
		border-left: 1px solid #D8D8D8;
	}

	.active {
		color: #fff;
		background-color: #0033FF;
		margin-left: 10px;
		padding: 3px 15px 3px 15px;
		border-radius: 25px 25px 25px 25px;
	}

	.fl {
		margin-right: 10px;
		padding: 3px 15px 3px 15px;
		background: #E4E4E4;
		border-radius: 25px 25px 25px 25px;
	}

	.align-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-card {
		width:$page-width;
		margin: 0 auto;
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tag {
		font-family: Source Han Sans;
		font-size: 28rpx;
		font-weight: 350;
		text-align: center;
		color: #000000;
		margin-right: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 160rpx;
	}
</style>